/*
 * @Author: xuhongling
 * @Date:   2023-08-24 14:51:00
 * @Last Modified by:   xuhongling
 * @Last Modified time: 2023-08-24 16:23:31
 */
import dateTimeLabelFormat from '@/hooks/web/useDateTimeFormat';

// ECharts Option
const setChartOption = (stationData, chartData) => {
  const timeData: any = [];
  const drpsData: any = [];
  const dypsData: any = [];
  const smpsData: any = [];
  for (let i = 0; i < chartData.length; i++) {
    timeData.push(chartData[i].tmMin)
    drpsData.push(chartData[i].drp)
    dypsData.push(chartData[i].dyp)
    smpsData.push(chartData[i].p)
  }
  const chartOption = {
    color: ['#12c277', '#298def', '#91cc75'],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      left: "center",
      top: "44",
      itemWidth: 20,
      selected: {
        '时段降雨量': true,
        '日降雨量': false,
        '累计雨量': false
      },
      data: ['时段降雨量', '日降雨量', '累计雨量'],
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: timeData,
      axisLine: {
        onZero: false,
        lineStyle: {
          type: 'solid',
          color: '#333'
        }
      },
      axisTick: {
        show: true,
        inside: true,
        interval: 'auto',
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        show: true,
        margin: 14,
        textStyle: {
          color: "#333",
          fontSize: 12,
        },
        formatter: (value, index) => {
          return dateTimeLabelFormat(value, index)
        }
      },
    },
    yAxis: [
      {
        type: 'value',
        position: 'left',
        name: '降雨量(mm)',
        scale: true,
        splitNumber: 5,
        boundaryGap: ['0', '5%'],
        // max: (value)=> {
        //   if (value.max < 5) {
        //     return 10
        //   }else if (value.max >= 5 && value.max < 10){
        //     return 15
        //   }else {
        //     return value.max + 3
        //   }
        // },
        nameTextStyle: {
          color: '#333'
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#333'
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#333",
            fontSize: 12,
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#f4f4f4'
          }
        },
      }
    ],
    series: [
      {
        name: '时段降雨量',
        type: 'bar',
        yAxisIndex: 0,
        barMaxWidth: 10, //柱图宽度
        itemStyle: {
          color: '#12c277',
        },
        data: drpsData,
      }, {
        name: '日降雨量',
        type: 'bar',
        yAxisIndex: 0,
        barMaxWidth: 10, //柱图宽度
        itemStyle: {
          color: '#298def',
        },
        data: dypsData
      }, {
        name: '累计雨量',
        type: 'line',
        yAxisIndex: 0,
        showSymbol: false,
        connectNulls: true, //是否连接空数据
        /*areaStyle: {
           opacity: 0.2
        },*/
        itemStyle: {
          color: "#ffd662",
          width: 1
        },
        data: smpsData
      }
    ],
  }
  return chartOption
}

export default setChartOption;
